<template>
  <div>
    <div class="common-layout">
      <el-container>
        <el-header style="box-shadow: 0 0 0 1px rgba(0,0,0,.05),0 2px 4px 1px rgba(0,0,0,.09);">
          <div class="inner_he">
            <div class="inner_box">
              约定
            </div>
          </div>
        </el-header>
        <el-container class="inner_hi">
          <el-aside width="240px" style="box-shadow: 0 0 0 1px rgba(0,0,0,.05),0 2px 4px 1px rgba(0,0,0,.09);">
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
              default-active="2" text-color="#fff" router>
              <el-sub-menu v-for="i in routerArr" :key="i.path" :index="i.path">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>{{ i.meta.title }}</span>
                </template>
                <el-menu-item v-for="item in i.children" :key="item.path" :index="item.path"
                  v-show="item.meta.isshow">{{
                    item.meta.title
                  }} </el-menu-item>
              </el-sub-menu>
              <el-menu-item index="4">
                <el-icon>
                  <setting />
                </el-icon>
                <span>Navigator Four</span>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <el-watermark :font="font">
              <router-view />
            </el-watermark>
          </el-main>
        </el-container>
      </el-container>
    </div>

  </div>

</template>
<script setup>
import { onMounted, ref, reactive } from 'vue'
import path from './router/index.js'

let routerArr = ref([])

const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})

// 处理数据

//处理数据生成菜单
function convertToNestedMenu(routes) {
  // 创建路径到路由的映射
  const pathMap = {};
  routes.forEach(route => {
    pathMap[route.path] = { ...route, children: [] };
  });

  // 结果数组
  const result = [];

  routes.forEach(route => {
    const item = pathMap[route.path];
    const segments = route.path.split('/').filter(Boolean);

    // 处理根路径
    if (segments.length === 1) {
      result.push(item);
      return;
    }

    // 构建父路径
    const parentSegments = segments.slice(0, -1);
    const parentPath = '/' + parentSegments.join('/');

    // 找到或创建父级菜单
    const parent = pathMap[parentPath];
    if (parent) {
      parent.children.push(item);
    } else {
      // 如果父路径不存在，添加到根目录
      result.push(item);
    }
  });

  return result;
}
onMounted(() => {
  console.log(convertToNestedMenu(path.routerPath), "路由");
  routerArr.value = convertToNestedMenu(path.routerPath)

})
</script>

<style scoped>
.inner_hi {
  min-height: 88vh;
}

.inner_he {
  display: flex;
  align-items: center;
  justify-content: center;
  /* box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 2px 4px 1px rgba(0, 0, 0, .09); */
}

.inner_box {
  height: 100%;

}
</style>
